<template>
  <view class="wapper">
    <view class="title">
      <view class="title-img" @click="goBack">
        <image src="../../../static/image/箭头 (1).png" mode="scaleToFill" />
      </view>
      <view class="title-text">
        {{
          index == 0
            ? "交水费"
            : index == 1
              ? "交电费"
              : index == 2 ? "交燃气费"
                : index == 3 ? "交暖气费" : ''
        }}
      </view>
    </view>
    <view style="text-align: end; margin: 10rpx 20rpx; color: rgb(123, 123, 123)">缴费历史</view>
    <view class="add" @click="goAdd"> + 添加缴费户号 </view>
    <view class="xinxi">
      <text>住宅</text>
      <text>共{{ resList.length }}户，已绑定2户</text>
    </view>
    <view class="card" v-for="(i, idx) in resList" :key="index">
      <view class="card-left">
        <!-- 这里是一个uni的复选框 -->
        <checkbox-group>
          <label class="checkbox">
            <checkbox :checked="i.show" />
          </label>
        </checkbox-group>
      </view>
      <view class="card-right">
        <view class="name">
          <view>{{ i.cardName }}</view>
          <view>详情
            <image style="width: 30rpx; height: 30rpx; vertical-align: middle" src="../../../static/image/箭头.png"
              mode="scaleToFill" />
          </view>
        </view>
        <view class="tag"> 已绑定 </view>
        <view class="dizhi"> {{ i.address }}{{ i.cardNumber }} </view>
        <view class="price">余额：{{ i.electricBalance }}元 </view>
        <view class="btn">
          <view :class="resList[idx].active == index ? 'active' : ''" @click="addList(i, index)"
            v-for="(item, index) in i.btns" :key="index">{{ '￥' + item }}</view>
        </view>
        <view class="inp ">
          <input type="number" v-model="i.number" placeholder="￥ 请输入缴纳的金额" placeholder-class="input-placeholder" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { addPayment } from "../../../api/AddApi"
import { onLoad } from "@dcloudio/uni-app";
let index = ref(0);
let user = JSON.parse(localStorage.getItem("user"))
let resList = ref([])
onLoad((option) => {
  index.value = option.index;
  // 请求数据
  addPayment().then(res => {
    console.log(res);
    resList.value = res.data.filter(item => item.uid == user.id)
    resList.value.forEach(item => {
      item.btns = ['30', '50', '100', '300'] //充值金额
      item.active = undefined //高亮
      item.number = '' //输入框
      item.show = false //复选框
    })
  })
});
let goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
// 点击高亮
let addList = (i, index) => {
  resList.value.forEach(item => {
    if (item.id == i.id) {
      item.active = index
    }
  })
}

// 添加缴费户号
let goAdd = () => {
  uni.navigateTo({
    url: '/pages/waterElectric/components/AccountAdd/AccountAdd'
  });
};
</script>

<style lang="scss" scoped>
.wapper {
  height: calc(100vh - 1rpx);
  background-color: rgb(242, 242, 242);
  padding-right: 6rpx;
  overflow: hidden;

  .title {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 36rpx;
    padding-left: 30rpx;
  }

  .title-text {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    width: 90%;
  }

  .title-img {
    width: 40rpx;
    height: 40rpx;
    display: inline-block;

    image {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }

  .add {
    margin-top: 100rpx !important;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 0 20rpx;
    color: var(--fontColor);
    text-align: center;
    margin: 30rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    box-shadow: 0 0 10rpx rgb(204, 204, 204);
  }

  .xinxi {
    height: 70rpx;
    line-height: 70rpx;
    background-color: rgb(255, 255, 255);
    margin: 0 30rpx 10rpx 30rpx;
  }

  .xinxi :nth-child(1) {
    margin: 0 10rpx;
  }

  .xinxi :nth-child(2) {
    color: rgb(123, 123, 123);
    font-size: 22rpx;
  }

  .card {
    background-color: #fff;
    margin: 10rpx 30rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    font-size: 23rpx;

    .card-right {
      width: 90%;
    }

    .name {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      color: rgb(123, 123, 123);
    }

    .tag {
      color: rgb(15, 92, 235);
      background-color: rgb(105, 223, 239);
      width: 90rpx;
      text-align: center;
      font-size: 20rpx;
      padding: 2rpx;
      margin: 20rpx 0;
    }

    .dizhi {
      color: rgb(123, 123, 123);
      margin: 15rpx 0;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      margin: 10rpx 0;

      view {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        border-radius: 10rpx;
        border: 1rpx solid rgb(123, 123, 123);
        margin: 10rpx;
      }
    }

    .inp {
      margin: 10rpx 0;

      input {
        width: 100%;
        height: 60rpx;
        border: 2rpx solid rgb(233, 227, 227);
        border-radius: 10rpx;
        padding-left: 20rpx;
        // padding: 0;
        font-size: 25rpx;
      }

      input ::-webkit-input-placeholder {
        color: rgb(130, 35, 35);
        font-size: 25rpx;
      }

    }

    // 按钮的点击高亮
    .active {
      background-color: rgb(2, 167, 240);
      color: #fff;
    }
  }
}
</style>
